<template>
  <el-container class="rootbox">
    <el-header style="padding-top: 10px;height: 40px;">
      <el-row :gutter="2" style="    padding-bottom: 9px;">
        <el-col :span="24">
          <el-button type="primary" @click="viewFormSave()">保 存</el-button>
          <el-button type="primary" @click="initData(true)">刷新数据</el-button>
          <el-button key="close" size="small" @click="viewFormClose()">关闭</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>

      <el-row :gutter="2">
        <el-col :span="24">
          <h4 v-if="propSetTypeField == 'user_id'">所选用户:{{form.name}}</h4>
          <h4 v-if="propSetTypeField == 'dept_id'">所选科室:{{form.name}}<small style="color: red">(同一仓库只能被某一科室选择)</small></h4>
        </el-col>
      </el-row>
      <el-row :gutter="2" type="flex"  style="    padding-bottom: 22px;" v-if="propSetTypeField == 'dept_id'">
        科室默认仓库
        <el-col :span="12">
          <el-select  v-model="warehouseIdDefault" filterable  placeholder="请选择" @change="selectChange" >
            <el-option
              v-for="item in userWarehousesAll"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="2" type="flex" justify="center">
        <el-col :span="24">
          <el-transfer
                       filterable
                       :filter-method="filterMethod"
                       filter-placeholder="请输入仓库名称"
                       :button-texts="['到左边', '到右边']"
                       :titles="['未选择', '已选择']"
                       v-model="userWarehouses"
                       :data="warehouses"
                       ref="transfer"
          >
          </el-transfer>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      warehouses: [], //所有仓库
      userWarehouses: [], //已选择仓库
      userWarehousesAll: [],
      warehouseIdDefault: null,
    }
  },
  props: {
    propInitData: Object,
    propSetTypeField: String
  },
  methods: {
    initData(noClear) {
      this.form = this.propInitData
      this.getAllWarehouses()
      this.getUserWarehouses()
      if (noClear != true) {
        this.$refs.transfer.clearQuery('left')
        this.$refs.transfer.clearQuery('right')
      }
    },
    //获取所有仓库
    getAllWarehouses() {
      this.$ajax.get(`/base/warehouse/getListForSetWarehouse?setTypeField=${this.propSetTypeField}&id=${this.form.id}`, {}).then(resp => {
        this.warehouses = []
        resp.data.forEach(item => {
          this.warehouses.push({
            key: item.id,
            label: item.name,
            pinyin: this.pyutils.chineseToPinYin(item.name).toLowerCase()
          })
        })
      })
    },
    //获取已设置的仓库
    getUserWarehouses() {
      this.$ajax.get('/base/user_warehouse/getUserWarehouseBySettype', {params: {id: this.form.id, setTypeField: this.propSetTypeField}}).then(resp => {
        this.userWarehouses = []
        this.warehouseIdDefault = null
        this.userWarehousesAll = resp.data
        resp.data.forEach(item => {
          if (item.flagDefault == 1) this.warehouseIdDefault = item.warehouseId
          this.userWarehouses.push(item.warehouseId)
        })
      })
    },
    filterMethod(query, item) {
      if (!query) return true
      return item.label.indexOf(query) > -1 || item.pinyin.indexOf(query) > -1
    },
    viewFormClose() {
      this.$emit('formClose')
    },
    viewFormSave() {
      this.utilVue.loadShow(true)

      let param = {
        id: this.form.id,
        warehouseIdList: this.userWarehouses,
        setTypeField: this.propSetTypeField
      }
      this.$ajax.post('/base/user_warehouse/set', param).then(resp => {
        if (resp.code == 0) {
          this.utilMessage.success('保存成功')
          this.getAllWarehouses()
          this.getUserWarehouses()
        }
        this.utilVue.loadHide()
      })
    },
    selectChange() {
      this.utilVue.loadShow(true)
      this.$ajax.get(`/base/user_warehouse/setdeptWarehouseDefault?deptId=${this.form.id}&warehouseId=${this.warehouseIdDefault}`).then(resp => {
        if (resp.code == 0) {
          this.utilMessage.success('默认仓库更改成功')
        }
        this.utilVue.loadHide()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .rootbox{
    .el-main{
      padding-top: 0px;
      /deep/ .el-transfer{
        height: 600px;
        .el-transfer-panel__body,.el-checkbox-group{
          height: 600px;
          max-height: 600px;
        }
        .el-transfer-panel{
          width: 300px;
        }
      }
    }
  }
</style>
